<template>
	<div class="goods-detail">
		<div class="preview-wrap">
			<div class="video-player-wrap" :class="{ show: switchMedia == 'video' }" v-if="goodsSkuDetail.video_url != ''">
				<video-player
					v-if="goodsSkuDetail.video_url != ''"
					ref="videoPlayer"
					:playsinline="true"
					:options="playerOptions"
					@play="onPlayerPlay($event)"
					@pause="onPlayerPause($event)"
					@ended="onPlayerEnded($event)"
					@waiting="onPlayerWaiting($event)"
					@playing="onPlayerPlaying($event)"
					@loadeddata="onPlayerLoadeddata($event)"
					@timeupdate="onPlayerTimeupdate($event)"
					@canplay="onPlayerCanplay($event)"
					@canplaythrough="onPlayerCanplaythrough($event)"
					@statechanged="playerStateChanged($event)"
					@ready="playerReadied"
				></video-player>

				<div class="media-mode" v-if="goodsSkuDetail.video_url != ''">
					<span :class="{ 'ns-bg-color': switchMedia == 'video' }" @click="switchMedia = 'video'">视频</span>
					<span :class="{ 'ns-bg-color': switchMedia == 'img' }" @click="switchMedia = 'img'">图片</span>
				</div>
			</div>
			<!-- , { size: 'big' } -->
			<div class="magnifier-wrap"><pic-zoom ref="PicZoom" :url="$img(picZoomUrl)" :scale="2"></pic-zoom></div>

			<div class="spec-items">
				<span class="left-btn iconfont iconarrow-left-copy" :class="{ move: moveThumbLeft }" @click="changeThumbImg('prev')"></span>
				<span class="right-btn iconfont iconarrow-right" :class="{ move: moveThumbRight }" @click="changeThumbImg('next')"></span>
				<ul :style="{ left: 30 + thumbPosition + 'px' }">
					<!-- 商品缩率图 -->
					<li v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" @mousemove="picZoomUrl = item" :class="{ selected: picZoomUrl == item }">
						<img :src="$img(item, { size: $goodsImgType('small',goodsSkuDetail.source) })" @error="imageErrorSpec(index)"/>
					</li>
				</ul>
			</div>

			<div class="share-collect" @click="editCollection">
				<i class="iconfont" :class="whetherCollection == 1 ? 'iconlikefill ns-text-color' : 'iconlike'"></i>
				<span data-collects="0">关注商品（{{ goodsSkuDetail.collect_num }}）</span>
			</div>
		</div>

		<!-- 商品信息 -->
		<div class="basic-info-wrap" v-loading="loading">
			<h1>{{ goodsSkuDetail.sku_name }}</h1>
			<p class="desc ns-text-color" v-if="goodsSkuDetail.introduction">{{ goodsSkuDetail.introduction }}</p>
            <div class="pintuan-tips">
                <div>
                    <img class="img-box" src="../../../assets\images\pintuanlogo.png" alt="">
                    <span>活动进行中</span>
                </div>
                <div>
                    距结束
					<span class="bg-black">{{day}}</span>天
                    <span class="bg-black">{{hr}}</span>:
                    <span class="bg-black">{{min}}</span>:
                    <span class="bg-black">{{sec}}</span>
                </div>
            </div>
			<div class="pintuan-tips" v-if="addonIsExit.nthmfolddiscount && goodsSkuDetail.promotion_type == 'nthmfolddiscount'">
                <div>
                    <img class="img-box" src="../../../assets\images\pintuanlogo.png" alt="">
                    <span>{{goodsSkuDetail.promotion_info.type_name}}</span>
					<!-- <span>同一件商品,
						<span v-for="(items,indexs) in discount_contents" :key="indexs">
							第{{items.num}}件{{items.discount}}折
						</span>
					</span> -->
                </div>
                <div>
                    距结束
					<span class="bg-black">{{day}}</span>天
                    <span class="bg-black">{{hr}}</span>:
                    <span class="bg-black">{{min}}</span>:
                    <span class="bg-black">{{sec}}</span>
                </div>
            </div>
			<div class="pintuan-tips" v-if="addonIsExit.ladderdiscount && goodsSkuDetail.promotion_type == 'ladderdiscount'">
                <div>
                    <img class="img-box" src="../../../assets\images\pintuanlogo.png" alt="">
                    <span>{{goodsSkuDetail.promotion_info.type_name}}</span>
                </div>
                <div>
                    距结束
					<span class="bg-black">{{day}}</span>天
                    <span class="bg-black">{{hr}}</span>:
                    <span class="bg-black">{{min}}</span>:
                    <span class="bg-black">{{sec}}</span>
                </div>
            </div>
			<div class="pintuan-tips" v-if="addonIsExit.platformmanjian && goodsSkuDetail.promotion_type == 'platformmanjian'">
                <div>
                    <img class="img-box" src="../../../assets\images\pintuanlogo.png" alt="">
                    <span>{{goodsSkuDetail.promotion_info.type_name}}</span>
                </div>
                <div>
                    距结束
					<span class="bg-black">{{day}}</span>天
                    <span class="bg-black">{{hr}}</span>:
                    <span class="bg-black">{{min}}</span>:
                    <span class="bg-black">{{sec}}</span>
                </div>
            </div>
			<div class="discount-banner ns-bg-color" v-if="goodsSkuDetail.promotion_type == 1 && discountTimeMachine.currentTime && addonIsExit.discount">
				<div class="activity-name">
					<i class="discount-icon iconfont iconicon_naozhong"></i>
					<span>限时折扣</span>
				</div>
				<div class="surplus-time">
					<span>{{ discountText }}</span>
					<count-down
						class="count-down"
						v-on:start_callback="countDownS_cb()"
						v-on:end_callback="countDownE_cb()"
						:currentTime="discountTimeMachine.currentTime"
						:startTime="discountTimeMachine.startTime"
						:endTime="discountTimeMachine.endTime"
						:dayTxt="'天'"
						:hourTxt="'小时'"
						:minutesTxt="'分钟'"
						:secondsTxt="'秒'"
					></count-down>

					<!-- :tipText="'距离开始文字1'"
					:tipTextEnd="'距离结束文字1'"
                    :endText="'结束自定义文字2'"-->
				</div>
			</div>

			<div class="item-block">
				<div class="promotion-price">
					<dl class="item-line">
						<dt class="ns-text-color-gray">销售价</dt>
						<dd>
							<em class="yuan ns-text-color">¥</em>
							<span class="price ns-text-color">{{ goodsSkuDetail.topic_price }}</span>
						</dd>
					</dl>
					<dl class="item-line">
						<dt class="ns-text-color-gray">原价</dt>
						<dd>
							<em class="market-yuan">¥</em>
							<span class="market-price">{{ goodsSkuDetail.price }}</span>
						</dd>
					</dl>
					<dl class="item-line" v-if="goodsSkuDetail.market_price > 0">
						<dt class="ns-text-color-gray">市场价</dt>
						<dd>
							<em class="market-yuan">¥</em>
							<span class="market-price">{{ goodsSkuDetail.market_price }}</span>
						</dd>
					</dl>

					<div class="statistical">
						<ul>
							<li>
								<p>累计评价</p>
								<span>{{ goodsSkuDetail.evaluate }}</span>
							</li>
							<li>
								<p>累计销量</p>
								<span>{{ goodsSkuDetail.sale_num }}{{ goodsSkuDetail.unit }}</span>
							</li>
						</ul>
					</div>

					<dl class="item-line coupon-list" v-if="addonIsExit.coupon && couponList.length">
						<dt class="ns-text-color-gray">优惠券</dt>
						<div>
							<dd>
								<p v-for="(item, index) in couponList" :key="index" class="ns-text-color" @click="receiveCoupon(item.coupon_type_id)">
									<!-- <span class="ns-border-color" v-if="item.type == 'discount'">{{ item.discount }}折</span> -->
									<span class="ns-border-color">￥{{ item.coupon_name }}</span>
									<!-- <label v-if="item.type == 'discount'">{{ item.discount }}折</label> -->
									<label>￥{{ item.coupon_name }}</label>
								</p>
							</dd>
						</div>
					</dl>
					<dl class="item-line manjian" v-if="addonIsExit.manjian && manjian.manjian_name">
						<dt>满减</dt>
						<dd>
							<i class="i-activity-flag ns-text-color ns-border-color">{{ manjian.manjian_name }}</i>
							<span v-for="(item, index) in manjian.rule_json" :key="index">满{{ item.money }}减{{ item.discount_money }}元；</span>
						</dd>
					</dl>
					<dl class="item-line" v-if="goodsSkuDetail.is_virtual == 0">
						<dt>运费</dt>
						<dd>
							<i class="i-activity-flag ns-text-color ns-border-color" v-if="goodsSkuDetail.is_free_shipping">快递免邮</i>
							<i class="i-activity-flag ns-text-color ns-border-color" v-else>快递不免邮</i>
						</dd>
					</dl>
					<dl class="item-line" v-if="goodsSkuDetail.promotion_type == 'nthmfolddiscount'">
						<dt>{{goodsSkuDetail.promotion_info.type_name}}</dt>
						<dd>
							<i class="i-activity-flag ns-text-color ns-border-color"  v-for="(item, index) in discount_contents" :key="index">
								第{{item.num}}件{{item.discount/10}}折
							</i>
						</dd>
					</dl>
					<dl class="item-line" v-if="goodsSkuDetail.promotion_type == 'ladderdiscount'">
						<dt>{{goodsSkuDetail.promotion_info.type_name}}</dt>
						<dd>
							<i class="i-activity-flag ns-text-color ns-border-color" v-for="(item, index) in discount_contents" :key="index">
								满{{item.num}}件{{item.discount/10}}折
							</i>
						</dd>
					</dl>
					<dl class="item-line" v-if="goodsSkuDetail.promotion_type == 'platformmanjian'">
						<dt>{{goodsSkuDetail.promotion_info.type_name}}</dt>
						<dd>
							<i class="i-activity-flag ns-text-color ns-border-color" v-for="(item, index) in rule_json" :key="index">
								满{{item.order_price}}元减{{item.reduce_price}}元
							</i>
						</dd>
					</dl>
				</div>
			</div>
			<dl class="item-line delivery" v-if="goodsSkuDetail.is_virtual == 0">
				<dt>配送至</dt>
				<dd>
					<div class="region-selected ns-border-color-gray">
						<span>
							<template v-if="selectedAddress['level_1']">
								<template v-for="item in selectedAddress">
									{{ item.name }}
								</template>
							</template>
							<template v-else>
								请选择配送地址
							</template>
						</span>
						<i class="el-icon-arrow-down"></i>
					</div>

					<div class="region-list ns-border-color-gray" :class="{ hide: hideRegion }">
						<ul class="nav-tabs">
							<li :class="{ active: currTabAddres == 'province' }" @click="currTabAddres = 'province'">
								<div>
									<span>{{ selectedAddress['level_1'] ? selectedAddress['level_1'].name : '请选择省' }}</span>
									<i class="el-icon-arrow-down"></i>
								</div>
							</li>
							<li :class="{ active: currTabAddres == 'city' }" @click="currTabAddres = 'city'">
								<div>
									<span>{{ selectedAddress['level_2'] ? selectedAddress['level_2'].name : '请选择市' }}</span>
									<i class="el-icon-arrow-down"></i>
								</div>
							</li>
							<li :class="{ active: currTabAddres == 'district' }" @click="currTabAddres = 'district'">
								<div>
									<span>{{ selectedAddress['level_3'] ? selectedAddress['level_3'].name : '请选择区/县' }}</span>
									<i class="el-icon-arrow-down"></i>
								</div>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane" :class="{ active: currTabAddres == 'province' }">
								<ul class="province">
									<li
										v-for="(item, index) in provinceArr"
										:key="index"
										:class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }"
									>
										<span @click="getAddress('city', item)">{{ item.name }}</span>
									</li>
								</ul>
							</div>
							<div class="tab-pane" :class="{ active: currTabAddres == 'city' }">
								<ul class="city">
									<li
										v-for="(item, index) in cityArr"
										:key="index"
										:class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }"
									>
										<span @click="getAddress('district', item)">{{ item.name }}</span>
									</li>
								</ul>
							</div>
							<div class="tab-pane" :class="{ active: currTabAddres == 'district' }">
								<ul class="district">
									<li
										v-for="(item, index) in districtArr"
										:key="index"
										:class="{ selected: selectedAddress['level_' + item.level] && selectedAddress['level_' + item.level].id == item.id }"
									>
										<span @click="getAddress('community', item)">{{ item.name }}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</dd>
			</dl>
			<dl class="item-line service">
				<dt>服务</dt>
				<dd>
					<span>
						由
						<router-link :to="'/shop' + shopInfo.site_id" class="ns-text-color">{{ shopInfo.site_name }}</router-link>
						发货并提供售后服务
					</span>
				</dd>
			</dl>
			<hr class="divider" />
			<!-- <div class="sku-list" v-if="goodsSkuDetail.goods_spec_format">
				<dl class="item-line" v-for="(item, index) in goodsSkuDetail.goods_spec_format" :key="index">
					<dt>{{ item.spec_name }}</dt>
					<dd>
						<ul>
							<li v-for="(item_value, index_value) in item.value" :key="index_value">
								<div
									:class="{
										'selected ns-border-color': item_value['selected'] || skuId == item_value.sku_id,
										disabled: item_value['disabled'] || (!item_value['selected'] && specDisabled)
									}"
									@click="changeSpec(item_value.sku_id, item_value.spec_id)"
								>
									<img v-if="item_value.image" :src="$img(item_value.image, { size: $goodsImgType('small',item_value.source) })" />
									<span>{{ item_value.spec_value_name }}</span>
									<i class="iconfont iconduigou1 ns-text-color"></i>
								</div>
							</li>
						</ul>
					</dd>
				</dl>
			</div> -->

			<div class="buy-number">
				<dl class="item-line">
					<dt>数量</dt>
					<dd>
						<div class="num-wrap">
							<el-input v-model="number" placeholder="0" @input="keyInput(false)" @blur="blur"></el-input>
							<div class="operation">
								<span class="increase el-icon-caret-top" @click="changeNum('+')"></span>
								<span class="decrease el-icon-caret-bottom" @click="changeNum('-')"></span>
							</div>
						</div>
						<span class="unit">{{ goodsSkuDetail.unit }}</span>
						<span class="inventory">库存{{ goodsSkuDetail.stock }}{{ goodsSkuDetail.unit }}</span>
						<!-- 限购 -->
						<!-- <em>(每人限购1件)</em> -->
					</dd>
				</dl>
			</div>

			<dl class="item-line buy-btn">
				<dt></dt>
				<dd>
					<template v-if="goodsSkuDetail.goods_state == 1 && goodsSkuDetail.verify_state == 1">
						<el-button type="primary" plain @click="buyNow">立即抢购</el-button>
						<!-- <el-button type="primary" icon="el-icon-shopping-cart-2" v-if="goodsSkuDetail.is_virtual == 0" @click="joinCart">加入购物车</el-button> -->
					</template>
					<template v-else>
						<el-button type="info" plain disabled>该商品已下架</el-button>
					</template>
					<div href="javascript:;" class="go-phone">
						<img src="@/assets/images/goods/qrcode.png" />
						<div class="qrcode-wrap"><img :src="qrcode" alt="二维码图片" /></div>
					</div>
				</dd>
			</dl>

			<dl
				class="item-line merchant-service"
				v-show="
					shopInfo.shop_baozh == 1 ||
						shopInfo.shop_qtian == 1 ||
						shopInfo.shop_zhping == 1 ||
						shopInfo.shop_erxiaoshi == 1 ||
						shopInfo.shop_tuihuo == 1 ||
						shopInfo.shop_shiyong == 1 ||
						shopInfo.shop_shiti == 1 ||
						shopInfo.shop_xiaoxie == 1
				"
			>
				<dt>商家服务</dt>
				<div>
					<dd v-if="shopInfo.shop_baozh == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="保证服务">保证服务</span>
					</dd>
					<dd v-if="shopInfo.shop_qtian == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费">7天退换</span>
					</dd>
					<dd v-if="shopInfo.shop_zhping == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="商品支持正品保障服务">正品保障</span>
					</dd>
					<dd v-if="shopInfo.shop_erxiaoshi == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="付款后2小时内发货">两小时发货</span>
					</dd>
					<dd v-if="shopInfo.shop_tuihuo == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="退货承诺">退货承诺</span>
					</dd>
					<dd v-if="shopInfo.shop_shiyong == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="试用中心">试用中心</span>
					</dd>
					<dd v-if="shopInfo.shop_shiti == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="实体验证">实体验证</span>
					</dd>
					<dd v-if="shopInfo.shop_xiaoxie == 1">
						<i class="el-icon-success"></i>
						<span class="ns-text-color-gray" title="如有商品质量问题、描述不符或未收到货等，您有权申请退款或退货，来回邮费由卖家承担">消协保证</span>
					</dd>
				</div>
			</dl>
		</div>

		<!-- 店铺信息 -->
		<div class="shop-wrap">
			<div class="head-wrap">
				<div class="img-wrap">
					<img
						class="img-responsive center-block"
						:src="shopInfo.avatar ? $img(shopInfo.avatar) : $img(defaultShopImage)"
						@error="shopInfo.avatar = defaultShopImage"
						:alt="shopInfo.site_name"
					/>
				</div>
				<h5>
					<span class="site-name">{{ shopInfo.site_name }}</span>
					<el-tag class="tag" size="small" v-if="shopInfo.is_own == 1">自营</el-tag>
				</h5>
			</div>
			<div class="info-wrap">
				<dl>
					<dt class="site-score">店铺评分</dt>
					<dd><el-rate v-model="score" disabled></el-rate></dd>
					<dt>商品描述：</dt>
					<dd>
						<span>{{ shopInfo.shop_desccredit }}</span>
						分
					</dd>
					<dt>卖家服务：</dt>
					<dd>
						<span>{{ shopInfo.shop_servicecredit }}</span>
						分
					</dd>
					<dt>发货速度：</dt>
					<dd>
						<span>{{ shopInfo.shop_deliverycredit }}</span>
						分
					</dd>
				</dl>
			</div>
			<div class="info-wrap" v-if="shopInfo.telephone">
				<dl>
					<dt>联系电话：</dt>
					<dd>{{ shopInfo.telephone }}</dd>
				</dl>
			</div>
			<div class="operation">
				<el-button class="btn btn-default" size="medium" @click="$router.pushToTab('shop-' + shopInfo.site_id)">进店逛逛</el-button>
				<el-button size="medium" @click="follow" v-if="hasFollow">取消关注</el-button>
				<el-button size="medium" @click="follow" v-else>关注店铺</el-button>
			</div>
		</div>

		<!-- 组合套餐 -->
		<el-tabs class="bundling-wrap" v-model="tabBundling" @tab-click="bundlingChange" v-if="addonIsExit.bundling && bundling.length && bundling[0].bl_name">
			<el-tab-pane :label="item.bl_name" :name="'bundling_' + item.bl_id" v-for="(item, index) in bundling" :key="index">
				<div class="master">
					<div class="sku-img"><img :src="$img(goodsSkuDetail.sku_image, { size: $goodsImgType('mid',goodsSkuDetail.source) })" /></div>
					<div class="sku-name">{{ goodsSkuDetail.sku_name }}</div>
					<div class="sku-price ns-text-color">￥{{ goodsSkuDetail.price }}</div>
					<i class="el-icon-plus"></i>
				</div>
				<div class="operation">
					<div class="price-wrap">
						<span>组合套餐价</span>
						<strong class="bl-price ns-text-color">￥{{ item.bl_price }}</strong>
					</div>
					<el-button type="primary" size="medium" @click="$router.pushToTab('promotion/combo-' + item.bl_id)">立即购买</el-button>
					<i class="equal">=</i>
				</div>

				<div class="suits">
					<ul>
						<li v-for="(goods, goods_index) in item.bundling_goods" :key="goods_index" @click="$router.pushToTab({ path: '/sku-' + goods.sku_id })">
							<div class="sku-img"><img :src="$img(goods.sku_image, { size: $goodsImgType('mid',goods.source) })" /></div>
							<div class="sku-name">{{ goods.sku_name }}</div>
							<div class="sku-price ns-text-color">￥{{ goods.price }}</div>
						</li>
					</ul>
				</div>
			</el-tab-pane>
		</el-tabs>

		<div class="detail-wrap">
			<div class="goods-recommended"><goods-recommend /></div>

			<el-tabs class="goods-tab" v-model="tabName" type="card" @tab-click="tabChange">
				<el-tab-pane label="商品详情" name="detail"><div v-html="goodsSkuDetail.goods_content"></div></el-tab-pane>
				<el-tab-pane label="商品属性" name="attr">
					<ul class="attr-list">
						<template v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
							<li v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">{{ item.attr_name }}：{{ item.attr_value_name }}</li>
						</template>
					</ul>
				</el-tab-pane>
				<el-tab-pane :label="goodsSkuDetail.evaluate ? '商品评价(' + goodsSkuDetail.evaluate + ')' : '商品评价'" name="evaluate" class="evaluate">
					<template v-if="goodsEvaluateList.length">
						<nav>
							<li class="selected">全部评价</li>
							<!-- <li>好评</li>
						<li>中评</li>
                            <li>差评</li>-->
						</nav>
						<ul class="list">
							<li v-for="(item, index) in goodsEvaluateList" :key="index">
								<div class="member-info">
									<img :src="$img(item.member_headimg)" @error="imageErrorEvaluate(index)" class="avatar" />
									<span>{{ item.member_name }}</span>
								</div>
								<div class="info-wrap">
									<el-rate v-model="item.star" disabled></el-rate>
									<p class="content">{{ item.content }}</p>
									<div class="img-list" v-if="item.images">
										<el-image v-for="(img, img_index) in item.images" :key="img_index" :src="$img(img)" :preview-src-list="item.imagesFormat"></el-image>
									</div>
									<div class="sku-info">
										<span>{{ item.sku_name }}</span>
										<span class="create-time">{{ $util.timeStampTurnTime(item.create_time) }}</span>
									</div>
									<div class="evaluation-reply" v-if="item.explain_first != ''">店家回复：{{ item.explain_first }}</div>
									<template v-if="item.again_content != ''">
										<div class="review-evaluation">
											<span>追加评价</span>
											<span class="review-time">{{ $util.timeStampTurnTime(item.again_time) }}</span>
										</div>
										<p class="content">{{ item.again_content }}</p>
										<div class="img-list">
											<el-image
												v-for="(again_img, again_index) in item.again_images"
												:key="again_index"
												:src="$img(again_img)"
												:preview-src-list="item.againImagesFormat"
											></el-image>
										</div>
										<div class="evaluation-reply" v-if="item.again_explain != ''">店家回复：{{ item.again_explain }}</div>
									</template>
								</div>
							</li>
						</ul>
						<div class="pager">
							<el-pagination
								background 
								:pager-count="5" 
								:total="total" 
								prev-text="上一页" 
								next-text="下一页" 
								:current-page.sync="currentPage" 
								:page-size.sync="pageSize" 
								@size-change="handlePageSizeChange" 
								@current-change="handleCurrentPageChange" 
								hide-on-single-page
							></el-pagination>
						</div>
					</template>
					<div class="empty" v-else>该商品暂无评价哦</div>
				</el-tab-pane>
				<el-tab-pane label="售后保障" name="after_sale" class="after-sale"><div v-html="service"></div></el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import PicZoom from 'vue-piczoom';
import GoodsRecommend from '@/components/GoodsRecommend';
import { detail } from "@/api/topic"

import {
    goodsSkuDetail,
    manjian,
    aftersale,
    modifyClicks,
    addGoodsbrowse,
    goodsSkuInfo,
    goodsQrcode
} from "@/api/goods/goods"
import {
    isCollect,
    addCollect,
    deleteCollect
} from "@/api/goods/goods_collect"
import {
    couponTypeList,
    couponReceive
} from "@/api/coupon"
import {
    bundlingList
} from "@/api/bundling"
import {
    goodsEvaluateList
} from "@/api/goods/evaluate"
import {
    mapGetters
} from "vuex"
import CountDown from "vue2-countdown"
import {
    shopIsSubscribe,
    addShopSubscribe,
    deleteShopSubscribe
} from "@/api/shop"
import {
    getArea
} from "@/api/address"

export default {
    name: 'topic_detail',
    data: () => {
        return {
            skuId: 0,
            loading: true,

            picZoomUrl: "",
            thumbPosition: 0,
            // 是否可以移动
            moveThumbLeft: false,
            moveThumbRight: false,

            // 商品详情
            goodsSkuDetail: {
                video_url: ""
            },
            discountText: "距离结束仅剩",
            discountTimeMachine: {
                currentTime: 0,
                startTime: 0,
                endTime: 0
            },
            qrcode: "",
            specDisabled: false,
            specBtnRepeat: false, //防止重复
            btnSwitch: false,

            // 店铺详情
            shopInfo: {},
            whetherCollection: 0,
            score: 0,

            couponList: [], //优惠券列表
            couponBtnRepeat: false, //获取优惠券防止重复提交

            manjian: {}, //满减活动列表

            //评价
            currentPage: 1,
            pageSize: 10,
            total: 0,
            goodsEvaluateList: [],
            //组合套餐
            bundling: [{
                bundling_goods: {
                    bl_name: "",
                    sku_image: ""
                }
            }],
            service: null,

            number: 1,
            tabName: "detail",
            tabBundling: "",
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
                autoplay: false, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4", // 类型
                    src: "" // url地址
                }],
                poster: "", // 封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true // 是否显示全屏按钮
                }
            },
            switchMedia: "img",

            // 是否关注店铺
            hasFollow: false,

            // 省市区县
            provinceArr: {},
            cityArr: {},
            districtArr: {},

            // 省市区县 id
            currTabAddres: "province",
            hideRegion: false,
            selectedAddress: {},
            day: 0,
            hr: 0,
            min: 0,
            sec: 0,
            end_time: '',
            start_time: '',
            //goods_contents: 0,
            discount_contents: '',
            rule_json: '',
            site_ids: '',
        }
    },
    components: {
        CountDown,
        PicZoom,
		GoodsRecommend
    },
    created() {
        this.skuId = this.$route.params.pathMatch
        this.getGoodsSkuDetail()
    },
    computed: {
        ...mapGetters(["token", "defaultHeadImage", "defaultShopImage", "defaultGoodsImage", "addonIsExit", 'locationRegion'])
    },
    mounted: function() {
        this.countdown()
    },
    watch: {
        $route: function(curr) {
            this.skuId = curr.params.pathMatch
            this.getGoodsSkuDetail()
        }
    },
    methods: {
        countdown: function() {
            // 定义结束时间戳
            var x = this.$timeStampTurnTime(this.goodsSkuDetail.end_time)
            const end = Date.parse(new Date(x))
                // 定义当前时间戳
            const now = Date.parse(new Date())

            // 做判断当倒计时结束时都为0
            if (now >= end) {
                this.day = 0
                this.hr = 0
                this.min = 0
                this.sec = 0
                return
            }
            // 用结束时间减去当前时间获得倒计时时间戳
            const msec = end - now
            let day = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
            let hr = parseInt(msec / 1000 / 60 / 60 % 24) //算出小时数
            let min = parseInt(msec / 1000 / 60 % 60) //算出分钟数
            let sec = parseInt(msec / 1000 % 60) //算出秒数
                //给数据赋值
            this.day = day
            this.hr = hr > 9 ? hr : '0' + hr
            this.min = min > 9 ? min : '0' + min
            this.sec = sec > 9 ? sec : '0' + sec

            //定义this指向
            const that = this
                // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
            setTimeout(function() {
                that.countdown()
            }, 1000)
        },


        tabChange(tab, event) {},
        bundlingChange(tab, event) {},
        getGoodsSkuDetail() {
            detail({
                    id: this.skuId
                })
                .then(res => {
                    let data = res.data
                    this.site_ids = res.data.shop_info.site_id;

                    if (data.goods_sku_detail != null) {


                        this.goodsSkuDetail = data.goods_sku_detail


                        if (this.goodsSkuDetail.promotion_type == 'ladderdiscount' || this.goodsSkuDetail.promotion_type == 'nthmfolddiscount' && data.goods_sku_detail.promotion_info) {
                            this.discount_contents = JSON.parse(data.goods_sku_detail.promotion_info.info.discount_content)
                                // this.discount_contents = data.goods_sku_detail.promotion_info.info.discount_content
                        }
                        if (this.goodsSkuDetail.promotion_type == 'platformmanjian' && data.goods_sku_detail.promotion_info) {
                            this.rule_json = JSON.parse(data.goods_sku_detail.promotion_info.info.rule_json)
                                // this.discount_contents = data.goods_sku_detail.promotion_info.info.discount_content
                        }
                        // this.goods_contents = this.goodsSkuDetail.promotion_info.info.discount_content
                        // this.goods_contents = JSON.parse(this.goods_contents)
                        // console.log(this.goods_contents)


                        this.shopInfo = data.shop_info
                        let num = (Number(this.shopInfo.shop_desccredit) + Number(this.shopInfo.shop_servicecredit) + Number(this.shopInfo
                            .shop_deliverycredit)) / 3
                        this.score = Number(num.toFixed(1));

                        if (this.skuId == 0) this.skuId = this.goodsSkuDetail.sku_id

                        this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",")

                        //媒体
                        if (this.goodsSkuDetail.video_url) {
                            this.switchMedia = "video"
                            this.playerOptions.poster = img(this.goodsSkuDetail.sku_images[0])
                            this.playerOptions.sources[0].src = img(this.goodsSkuDetail.video_url)
                        }

                        this.picZoomUrl = this.goodsSkuDetail.sku_images[0]

                        this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件"

                        // 当前商品SKU规格
                        if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format)

                        // 商品属性
                        if (this.goodsSkuDetail.goods_attr_format) {
                            let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format)
                            this.goodsSkuDetail.goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format)
                            this.goodsSkuDetail.goods_attr_format = util.unique(this.goodsSkuDetail.goods_attr_format, "attr_id")
                            for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
                                for (var j = 0; j < goods_attr_format.length; j++) {
                                    if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[
                                            i].attr_value_id != goods_attr_format[j].attr_value_id) {
                                        this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name
                                    }
                                }
                            }
                        }

                        // 商品SKU格式
                        if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail
                            .goods_spec_format)

                        window.document.title = `${this.goodsSkuDetail.sku_name} - ${window.document.title}`

                        // 限时折扣
                        if ((this.addonIsExit.discount && this.goodsSkuDetail.promotion_type == 1) ||
                            (this.addonIsExit.ladderdiscount && this.goodsSkuDetail.promotion_type == 'ladderdiscount') ||
                            (this.addonIsExit.nthmfolddiscount && this.goodsSkuDetail.promotion_type == 'nthmfolddiscount') ||
                            (this.addonIsExit.platformmanjian && this.goodsSkuDetail.promotion_type == 'platformmanjian')) {
                            //检测倒计时
                            if (this.goodsSkuDetail.end_time - res.timestamp > 0) {
                                this.discountTimeMachine = {
                                    currentTime: res.timestamp,
                                    startTime: res.timestamp,
                                    endTime: this.goodsSkuDetail.end_time
                                }
                            } else {
                                this.goodsSkuDetail.promotion_type = 0
                            }
                        }
                        this.loading = false
                    } else {
                        this.$router.push("/")
                    }
                })
                .then(res => {
                    if (this.token != "") {
                        this.getWhetherCollection()
                        this.isFollow()
                    }
                    if (this.addonIsExit.manjian) this.getManjian()
                    if (this.addonIsExit.coupon) this.getCoupon()
                    if (this.addonIsExit.bundling) this.getBundling()
                    this.getAftersale()
                    this.modifyGoodsInfo()
                    this.getGoodsEvaluate()
                    this.getGoodsQrcode()
                    this.getAddress('province', null, true);
                    if (!this.locationRegion) {

                        this.$store.commit("app/SET_LOCATION_REGION", {
                            "level_1": {
                                "id": 110000,
                                "pid": 0,
                                "name": "北京市",
                                "shortname": "北京",
                                "longitude": "116.40529",
                                "latitude": "39.904987",
                                "level": 1,
                                "sort": 1,
                                "status": 1,
                                "default_data": 1
                            },
                            "level_2": {
                                "id": 110100,
                                "pid": 110000,
                                "name": "北京市",
                                "shortname": "北京",
                                "longitude": "116.40529",
                                "latitude": "39.904987",
                                "level": 2,
                                "sort": 1,
                                "status": 1,
                                "default_data": 1
                            },
                            "level_3": {
                                "id": 110101,
                                "pid": 110100,
                                "name": "东城区",
                                "shortname": "东城",
                                "longitude": "116.418755",
                                "latitude": "39.917545",
                                "level": 3,
                                "sort": 3,
                                "status": 1,
                                "default_data": 1
                            }
                        });
                    }

                    this.selectedAddress = this.locationRegion;
                    this.provinceId = this.selectedAddress.level_1.id
                    this.getAddress('city', null, true, () => {
                        this.cityId = this.selectedAddress.level_2.id
                        if (this.cityId) this.getAddress('district', null, true)
                    });
                })
                .catch(res => {
                    this.loading = false
                    this.$router.push("/")
                })
        },
        changeThumbImg(tag) {
            if (this.goodsSkuDetail.sku_images.length < 4) return
            let page = this.goodsSkuDetail.sku_images.length % 4 // 可见数量4个
            let position = 88
            if (page == 0) page = this.goodsSkuDetail.sku_images.length - 4 // 可见数量4个
            else if (page != 0 && page != 1 && page < 2) return

            if (tag == "prev") {
                if (this.thumbPosition != 0 && Math.round(this.thumbPosition, 2) != position) {
                    this.thumbPosition += position
                        // this.moveThumbLeft = true;
                } else {
                    // this.moveThumbLeft = false;
                }
            } else if (tag == "next") {
                if (Math.round(this.thumbPosition, 2) != -Math.round(position * page, 2)) {
                    this.thumbPosition -= position
                        // this.moveThumbRight = true;
                } else {
                    // this.moveThumbRight = false;
                }
            }
        },
        //获取用户是否关注
        getWhetherCollection() {
            isCollect({
                goods_id: this.goodsSkuDetail.goods_id
            }).then(res => {
                this.whetherCollection = res.data
            })
        },
        editCollection() {
            //未关注添加关注
            if (this.whetherCollection == 0) {
                addCollect({
                    sku_id: this.skuId,
                    site_id: this.goodsSkuDetail.site_id,
                    goods_id: this.goodsSkuDetail.goods_id,
                    category_id: this.goodsSkuDetail.category_id,
                    sku_name: this.goodsSkuDetail.sku_name,
                    sku_price: this.goodsSkuDetail.discount_price,
                    sku_image: this.goodsSkuDetail.sku_image
                }).then(res => {
                    var data = res.data
                    if (data > 0) {
                        this.whetherCollection = 1
                        this.goodsSkuDetail.collect_num++
                    }
                })
            } else {
                //已关注取消关注
                deleteCollect({
                    goods_id: this.goodsSkuDetail.goods_id
                }).then(res => {
                    var data = res.data
                    if (data > 0) {
                        this.whetherCollection = 0
                        this.goodsSkuDetail.collect_num--
                    }
                })
            }
        },
        //获取满减信息
        getManjian() {
            manjian({
                goods_id: this.goodsSkuDetail.goods_id,
                site_id: this.goodsSkuDetail.site_id
            }).then(res => {
                let data = res.data
                if (data) {
                    this.manjian = data
                }
            })
        },
        // 获取优惠券
        getCoupon() {
            couponTypeList({
                goods_id: this.goodsSkuDetail.goods_id,
                site_id: this.site_ids,
            }).then(res => {
                let data = res.data
                if (data) {
                    this.couponList = []
                    for (let i = 0; i < data.length; i++) {
                        if (i > 4) break
                        this.couponList.push(data[i])
                    }
                }
            })
        },
        // 领取优惠券
        receiveCoupon(couponTypeId) {
            if (this.couponBtnRepeat) return
            this.couponBtnRepeat = true

            couponReceive({
                    coupon_type_id: couponTypeId,
                    site_id: this.goodsSkuDetail.site_id,
                    get_type: 2 //获取方式:1订单2.直接领取3.活动领取
                })
                .then(res => {
                    var data = res.data
                    let msg = res.message
                    if (res.code == 0) {
                        msg = "领取成功"
                    }
                    this.$message({
                        message: msg,
                        type: "success"
                    })
                    this.couponBtnRepeat = false
                })
                .catch(res => {
                    this.couponBtnRepeat = false
                })
        },
        // 组合套餐
        getBundling() {
            bundlingList({
                sku_id: this.skuId
            }).then(res => {
                if (res.data && res.data.length) {
                    this.bundling = res.data
                    this.tabBundling = "bundling_" + this.bundling[0].bl_id
                    for (var i = 0; i < this.bundling.length; i++) {
                        for (var j = 0; j < this.bundling[i].bundling_goods.length; j++) {
                            if (this.bundling[i].bundling_goods[j].sku_id == this.skuId) {
                                this.bundling[i].bundling_goods.splice(j, 1)
                            }
                        }
                    }
                }
            })
        },
        // 售后保障
        getAftersale() {
            aftersale({}).then(res => {
                if (res.code == 0 && res.data) {
                    let data = res.data.content
                    if (res.data.content) this.service = res.data.content
                }
            })
        },
        //更新商品信息
        modifyGoodsInfo() {
            //更新商品点击量
            modifyClicks({
                sku_id: this.skuId,
                site_id: this.goodsSkuDetail.site_id
            })

            //添加足迹
            addGoodsbrowse({
                goods_id: this.goodsSkuDetail.goods_id,
                sku_id: this.skuId,
                category_id: this.goodsSkuDetail.category_id,
                category_id_1: this.goodsSkuDetail.category_id_1,
                category_id_2: this.goodsSkuDetail.category_id_2,
                category_id_3: this.goodsSkuDetail.category_id_3,
                site_id: this.goodsSkuDetail.site_id
            })
        },
        // 商品二维码
        getGoodsQrcode() {
            goodsQrcode({
                sku_id: this.skuId
            }).then(res => {
                let data = res.data
                if (data.path.h5.img) this.qrcode = img(data.path.h5.img)
            })
        },
        // 商品评价列表
        getGoodsEvaluate() {
            goodsEvaluateList({
                page: this.currentPage,
                page_size: this.pageSize,
                goods_id: this.goodsSkuDetail.goods_id
            }).then(res => {
                let list = []
                let msg = res.message
                if (res.code == 0 && res.data) {
                    list = res.data.list
                    this.total = res.data.count
                }

                for (var i = 0; i < list.length; i++) {
                    // 1好评2中评3差评
                    if (list[i].explain_type == 1) {
                        list[i].star = 5
                    } else if (list[i].explain_type == 2) {
                        list[i].star = 3
                    } else if (list[i].explain_type == 3) {
                        list[i].star = 1
                    }
                    if (list[i].images) {
                        list[i].images = list[i].images.split(",")
                        list[i].imagesFormat = []
                        for (var k = 0; k < list[i].images.length; k++) {
                            list[i].imagesFormat.push(img(list[i].images[k]))
                        }
                    }

                    if (list[i].again_images) {
                        list[i].again_images = list[i].again_images.split(",")
                        list[i].againImagesFormat = []
                        for (var j = 0; j < list[i].again_images.length; j++) {
                            list[i].againImagesFormat.push(img(list[i].again_images[j]))
                        }
                    }
                    if (list[i].is_anonymous == 1) list[i].member_name = list[i].member_name.replace(list[i].member_name.substring(1,
                        list[i].member_name.length - 1), "***")
                }
                this.goodsEvaluateList = list
            })
        },
        // 图片加载失败
        imageErrorEvaluate(index) {
            this.goodsEvaluateList[index].member_headimg = this.defaultHeadImage
        },
        handlePageSizeChange(size) {
            this.pageSize = size
            this.getGoodsEvaluate()
        },
        handleCurrentPageChange(page) {
            this.currentPage = page
            this.getGoodsEvaluate()
        },
        changeSpec(skuId, spec_id) {
            if (this.specDisabled) return
            this.specBtnRepeat = false
            this.skuId = skuId
                // 清空选择
            for (var i = 0; i < this.goodsSkuDetail.goods_spec_format.length; i++) {
                var sku = this.goodsSkuDetail.goods_spec_format[i]
                for (var j = 0; j < sku.value.length; j++) {
                    // 排除当前点击的规格值
                    if (spec_id == this.goodsSkuDetail.goods_spec_format[i].value[j].spec_id) {
                        this.goodsSkuDetail.goods_spec_format[i].value[j].selected = false
                    }
                }
            }

            goodsSkuInfo({
                sku_id: this.skuId
            }).then(res => {
                let data = res.data
                if (data != null) {
                    data.sku_images = data.sku_images.split(",")

                    this.picZoomUrl = data.sku_images[0]

                    this.playerOptions.poster = img(data.sku_images[0])

                    // 当前商品SKU规格
                    if (data.sku_spec_format) data.sku_spec_format = JSON.parse(data.sku_spec_format)

                    // 商品SKU格式
                    if (data.goods_spec_format) data.goods_spec_format = JSON.parse(data.goods_spec_format)

                    this.keyInput(true)

                    // 限时折扣
                    if (data.promotion_type == 1) {
                        this.discountTimeMachine = {
                            currentTime: res.timestamp,
                            startTime: res.timestamp,
                            endTime: data.end_time
                        }
                    }
                    this.specBtnRepeat = false
                    Object.assign(this.goodsSkuDetail, data)
                } else {
                    this.$router.push("/")
                }
            })
        },
        changeNum(tag) {
            if (this.goodsSkuDetail.stock == 0) return

            var stock = this.goodsSkuDetail.stock
            var min = 1

            if (tag == "+") {
                // 加
                if (this.number < stock) {
                    this.number++
                } else {
                    return
                }
            } else if (tag == "-") {
                // 减
                if (this.number > min) {
                    this.number -= 1
                } else {
                    return
                }
            }
        },
        blur() {
            let newNumber = parseInt(this.number)
            this.number = 0
            setTimeout(() => {
                this.number = newNumber
            }, 0)
        },
        //输入数量
        keyInput(flag, callback) {
            setTimeout(() => {
                var stock = this.goodsSkuDetail.stock

                // 库存为0
                if (this.goodsSkuDetail.stock == 0) {
                    this.number = 0
                    return
                }

                // 防止空
                if (flag && this.number.length == 0) this.number = 1

                // 防止输入0和负数、非法输入
                if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1

                if (this.number > stock) {
                    this.number = stock
                }

                if (flag) this.number = parseInt(this.number)
                if (callback) callback()
            }, 0)
        },
        // 播放回调
        onPlayerPlay(player) {},
        // 暂停回调
        onPlayerPause(player) {},
        // 视频播完回调
        onPlayerEnded(player) {},
        // DOM元素上的readyState更改导致播放停止
        onPlayerWaiting(player) {},
        // 已开始播放回调
        onPlayerPlaying(player) {},
        // 当播放器在当前播放位置下载数据时触发
        onPlayerLoadeddata(player) {},
        // 当前播放位置发生变化时触发。
        onPlayerTimeupdate(player) {},
        //媒体的readyState为HAVE_FUTURE_DATA或更高
        onPlayerCanplay(player) {},
        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
        onPlayerCanplaythrough(player) {},
        //播放状态改变回调
        playerStateChanged(playerCurrentState) {},
        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
        playerReadied(player) {},
        // 加入购物车
        joinCart() {
            //纠正数量
            this.keyInput(true, () => {
                if (this.goodsSkuDetail.stock == 0) {
                    this.$message({
                        message: "商品已售罄",
                        type: "warning"
                    })
                    return
                }

                if (this.number.length == 0 || this.number == 0) {
                    this.$message({
                        message: "购买数量不能为0",
                        type: "warning"
                    })
                    return
                }

                if (this.btnSwitch) return
                this.btnSwitch = true

                this.$store
                    .dispatch("cart/add_to_cart", {
                        site_id: this.goodsSkuDetail.site_id,
                        sku_id: this.goodsSkuDetail.sku_id,
                        num: this.number
                    })
                    .then(res => {
                        var data = res.data
                        if (data > 0) {
                            this.$message({
                                message: "加入购物车成功",
                                type: "success"
                            })
                        }
                        this.btnSwitch = false
                    })
            })
        },
        // 立即购买
        buyNow() {
            //纠正数量
            this.keyInput(true, () => {
                if (this.goodsSkuDetail.stock == 0) {
                    this.$message({
                        message: "商品已售罄",
                        type: "warning"
                    })
                    return
                }

                if (this.number.length == 0 || this.number == 0) {
                    this.$message({
                        message: "购买数量不能为0",
                        type: "warning"
                    })
                    return
                }
                var data = {
                    //topic_goods_id: this.goodsDetail.id,
                    topic_goods_id: this.skuId,
                    //sku_id: this.skuId,
                    num: this.number
                }


                this.$store.dispatch("order/setOrderCreateData", data)
                this.$router.push({
                    path: "/promotion/topic_payment"
                })
            })
        },
        countDownS_cb() {},
        countDownE_cb() {
            this.discountText = "活动已结束"
        },
        //是否关注
        isFollow() {
            shopIsSubscribe({
                site_id: this.goodsSkuDetail.site_id
            }).then(res => {
                if (res.code == 0) {
                    this.hasFollow = res.data
                }
            })
        },
        follow() {
            if (this.hasFollow) {
                deleteShopSubscribe({
                    site_id: this.goodsSkuDetail.site_id
                }).then(res => {
                    if (res.code == 0 && res.data) {
                        this.hasFollow = !this.hasFollow
                        this.$message({
                            message: "取消成功",
                            type: "success"
                        })
                    }
                })
            } else {
                addShopSubscribe({
                    site_id: this.goodsSkuDetail.site_id
                }).then(res => {
                    if (res.code == 0 && res.data) {
                        this.hasFollow = !this.hasFollow
                        this.$message({
                            message: "关注成功",
                            type: "success"
                        })
                    }
                })
            }
        },
        // 图片加载失败
        imageErrorSpec(index) {
            this.goodsSkuDetail.sku_images[index] = this.defaultGoodsImage
            this.picZoomUrl = this.defaultGoodsImage
        },
        /**
         * 获取地址
         * @param {Object} type
         * @param {Object} item
         * @param {Object} first 是否第一次
         */
        getAddress(type, item, first, callback) {
            let pid = 0
            switch (type) {
                case 'province':
                    //加载省
                    pid = 0
                    break
                case 'city':
                    //加载市
                    if (item) {
                        this.provinceId = item.id
                    }
                    pid = this.provinceId
                    this.cityArr = {}
                    this.districtArr = {}
                    break
                case 'district':
                    //加载区县
                    if (item) this.cityId = item.id
                    pid = this.cityId
                    this.districtArr = {}
                    break
            }
            if (item) {
                if (item.level <= 2) {
                    let len = item.level;
                    for (let i = len; i <= 3; i++) {
                        delete this.selectedAddress['level_' + i];
                    }
                }
                this.selectedAddress['level_' + item.level] = item;
            }

            if (!first) this.$store.commit("app/SET_LOCATION_REGION", this.selectedAddress)
            this.$forceUpdate();
            if (type == 'community') {
                this.hideRegion = true;
                setTimeout(() => {
                    this.hideRegion = false;
                }, 10);
                return;
            }

            getArea({
                    pid: pid
                })
                .then(res => {
                    const {
                        code,
                        data
                    } = res;
                    if (data) {
                        switch (type) {
                            case 'province':
                                //加载省
                                this.provinceArr = data
                                break
                            case 'city':
                                //加载市
                                this.cityArr = data
                                break
                            case 'district':
                                //加载区县
                                this.districtArr = data
                                break
                        }
                        this.currTabAddres = type

                        if (callback) callback();
                    }
                })
                .catch(err => {})
        }
    }
}
</script>
<style lang="scss">
.goods-detail {
    margin-top: 20px;
    overflow: hidden;
    .preview-wrap {
        float: left;
        .video-player-wrap {
            position: absolute;
            z-index: 1;
            .video-player {
                visibility: hidden;
                >div {
                    width: 356px;
                    height: 356px;
                    display: none;
                }
                .vjs-control-bar,
                .vjs-big-play-button {
                    visibility: hidden;
                    transition: none;
                }
                .vjs-big-play-button {
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .media-mode {
                position: absolute;
                width: 356px;
                z-index: 5;
                bottom: 0;
                top: 300px;
                text-align: center;
                line-height: 25px;
                span {
                    background: rgba(100, 100, 100, 0.6);
                    color: #fff;
                    font-size: 12px;
                    line-height: 25px;
                    border-radius: 10px;
                    padding: 0 15px;
                    display: inline-block;
                    cursor: pointer;
                    &:last-child {
                        margin-left: 20px;
                    }
                }
            }
            &.show {
                .video-player,
                .vjs-control-bar,
                .vjs-big-play-button {
                    visibility: visible;
                }
                .video-player {
                    >div {
                        display: block;
                    }
                }
                .media-mode {
                    top: initial;
                    bottom: 50px;
                }
            }
        }
        .magnifier-wrap {
            width: 356px;
            height: 356px;
            border: 1px solid #e9e9e9;
            box-sizing: border-box;
            .magnifier-box .mouse-cover {
                background-color: #fede4f;
                opacity: 0.4;
            }
        }
        .spec-items {
            position: relative;
            width: 356px;
            height: 56px;
            margin-top: 25px;
            margin-bottom: 13px;
            overflow: hidden;
            >span {
                cursor: pointer;
                // cursor: not-allowed;
                bottom: 0;
                line-height: 56px;
                position: absolute;
                // background: #e5e5e5;
                background: #fff;
                color: #838383;
                z-index: 1;
                // &.move {
                // 	cursor: pointer;
                // 	background: #fff;
                // }
            }
            .left-btn {
                left: 0;
            }
            .right-btn {
                right: 0;
            }
            ul {
                width: 500%;
                position: absolute;
                top: 0;
                left: 30px;
                li {
                    width: 56px;
                    height: 56px;
                    float: left;
                    overflow: hidden;
                    margin-right: 5px;
                    border: 1px solid #e9e9e9;
                    cursor: pointer;
                    opacity: 0.5;
                    box-sizing: border-box;
                    &:hover,
                    &.selected {
                        opacity: 1;
                        border-color: $base-color;
                    }
                }
            }
        }
        .share-collect {
            padding: 10px 0 20px;
            cursor: pointer;
            text-align: right;
            color: #838383;
            i,
            span {
                vertical-align: middle;
            }
            i {
                margin-right: 5px;
            }
        }
    }
    .basic-info-wrap {
        float: left;
        width: calc(100% - 356px - 234px - 40px);
        margin-left: 20px;
        .pintuan-tips {
            width: 100%;
            height: 42px;
            background-image: linear-gradient(to right, #F52D90, #FF0A5B);
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            color: #fff;
            align-items: center;
            border-radius: 2px;
            .img-box {
                width: 20px;
                height: 20px;
                margin-right: 5px;
            }
            .bg-black {
                display: inline-block;
                background-color: #000;
                width: 20px;
                text-align: center;
                height: 25px;
                border-radius: 2px;
            }
        }
        h1 {
            font-size: 16px;
            margin: 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .desc {
            font-size: $ns-font-size-base;
            margin-bottom: 5px;
        }
        .divider {
            margin: 10px 0;
            border: 0;
            border-top: 1px dotted #e5e5e5;
        }
        .discount-banner {
            background: url(../../../assets/images/goods/discount_bg.png) no-repeat;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .activity-name {
                color: #fff;
                font-size: 14px;
                height: 40px;
                i {
                    display: inline-block;
                    line-height: 40px;
                }
                span {
                    display: inline-block;
                    line-height: 40px;
                    vertical-align: top;
                }
            }
            .discount-icon {
                margin: 0 8px 0 10px;
                color: #fff;
                font-size: 20px;
            }
            .surplus-time {
                color: #fff;
                font-size: 14px;
                float: right;
                height: 35px;
                line-height: 35px;
                padding-right: 5px;
                text-align: right;
                >span {
                    margin-right: 5px;
                }
                i {
                    font-style: normal;
                    padding: 2px;
                    width: 20px;
                    height: 20px;
                    margin: 0 5px;
                    border-radius: 3px;
                }
                .count-down {
                    display: inline-block;
                }
            }
        }
        .item-block {
            background: url(../../../assets/images/goods/goods_detail_bg.png) repeat-x;
            padding: 10px 0;
            position: relative;
            .statistical {
                position: absolute;
                right: 20px;
                top: 16px;
                li {
                    display: inline-block;
                    text-align: center;
                    position: relative;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    &:first-child {
                        margin-right: 40px;
                    }
                    p {
                        color: #838383;
                    }
                    span {
                        color: #383838;
                        font-size: 16px;
                    }
                }
            }
        }
        .item-line {
            font-size: 14px;
            min-height: 35px;
            line-height: 35px;
            display: flex;
            align-items: center;
            dt {
                display: inline-block;
                width: 60px;
                height: 35px;
                line-height: 35px;
                text-align: justify;
                padding-left: 16px;
                font-size: 12px;
                margin-right: 16px;
                color: #838383;
                flex-shrink: 0;
                &::after {
                    display: inline-block;
                    width: 100%;
                    content: '';
                    height: 0;
                }
            }
            >* {
                height: inherit;
                line-height: inherit;
                font-size: 12px;
            }
            >dd {
                display: inline-block;
                vertical-align: bottom;
            }
            .yuan {
                font-size: 18px;
            }
            .price {
                font-size: 30px;
                font-weight: bold;
            }
            .market-yuan {
                font-size: 14px;
                text-decoration: line-through;
            }
            .market-price {
                font-size: 14px;
                margin-left: 5px;
                text-decoration: line-through;
            }
            &.promotion-price .label {
                line-height: initial;
                font-size: 18px;
                background: transparent;
                padding: 0;
                vertical-align: text-bottom;
            }
            &.coupon-list {
                margin-top: 10px;
                >div {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    dd {
                        margin-right: 20px;
                    }
                }
                p {
                    display: inline-block;
                    position: relative;
                    line-height: 18px;
                }
                span {
                    width: 100px;
                    padding: 2px 10px;
                    font-size: 12px;
                    margin-right: 10px;
                    cursor: pointer;
                    background-color: $base-color;
                    -webkit-mask-box-image: url(../../../assets/images/goods/coupon.png);
                }
                label {
                    line-height: 16px;
                    position: absolute;
                    left: 10px;
                    top: 1px;
                }
            }
            &.manjian span {
                // padding: 2px 10px;
                font-size: 12px;
                margin-right: 5px;
            }
            &.delivery {
                position: relative;
                i {
                    margin-left: 5px;
                }
                .region-selected {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                    cursor: pointer;
                    margin: 0 5px 0 0;
                    width: auto;
                    padding: 0 10px;
                    height: 23px;
                    line-height: 23px;
                    border: 1px solid #e5e5e5;
                    z-index: 2;
                }
                .region-list {
                    width: 466px;
                    position: absolute;
                    z-index: 10;
                    top: 29px;
                    left: 82px;
                    background: #fff;
                    border: 1px solid #e5e5e5;
                    padding: 15px;
                    line-height: 18px;
                    height: auto;
                    display: none;
                    &.hide {
                        display: none !important;
                    }
                    .nav-tabs {
                        border-bottom: 2px solid $base-color;
                        height: 30px;
                        >li {
                            margin-bottom: -2px;
                            float: left;
                            >div {
                                padding: 4px 8px;
                                border: 2px solid transparent;
                                height: 20px;
                                display: inline-block;
                                line-height: 20px;
                                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
                                cursor: pointer;
                                &:hover {
                                    border-color: transparent;
                                }
                            }
                            &.active {
                                >div {
                                    color: $base-color;
                                    border: 2px solid;
                                    border-bottom-color: #fff !important;
                                }
                            }
                        }
                    }
                    .tab-content {
                        >.active {
                            padding: 10px 0;
                        }
                        >.tab-pane {
                            display: none;
                            &.active {
                                display: block;
                            }
                            li {
                                float: left;
                                width: 25%;
                                line-height: 30px;
                                &.selected {
                                    color: $base-color;
                                }
                                span {
                                    cursor: pointer;
                                    &:hover {
                                        color: $base-color;
                                    }
                                }
                            }
                        }
                    }
                }
                dd:hover {
                    .region-list {
                        display: block;
                    }
                }
            }
            &.service a {
                margin: 0 5px;
            }
            &.buy-btn {
                margin: 20px 0;
                button {
                    width: 160px;
                    height: 40px;
                    margin-right: 10px;
                    font-size: 16px;
                    text-shadow: 0 0 0;
                    &[disabled] {
                        cursor: not-allowed;
                        pointer-events: initial;
                        border: 1px solid;
                        opacity: 1;
                    }
                    i {
                        margin-right: 5px;
                        font-size: 16px;
                    }
                }
            }
            .i-activity-flag {
                padding: 2px 5px;
                border: 1px solid;
                border-radius: 2px;
                font-size: 12px;
                line-height: 14px;
                margin-right: 5px;
                white-space: nowrap;
            }
            &.gift-point strong {
                font-size: 14px;
            }
            &.merchant-service {
                overflow: hidden;
                margin: 10px 0;
                align-items: flex-start;
                >div {
                    display: inline-block;
                }
                dd {
                    display: inline-block;
                    margin-right: 18px;
                    // margin: 0;
                    &:last-child {
                        padding-right: 0;
                    }
                    i {
                        color: $base-color;
                        font-size: $ns-font-size-base;
                        margin-right: 5px;
                    }
                    span {
                        cursor: pointer;
                    }
                }
            }
        }
        .sku-list {
            ul {
                overflow: hidden;
                padding: 1px;
                li {
                    float: left;
                    position: relative;
                    margin: 2px 10px 10px 0;
                    line-height: 14px;
                    vertical-align: middle;
                    div {
                        padding: 8px 12px;
                        text-align: center;
                        border: 1px solid #b7b7b7;
                        display: inline-block;
                        -webkit-transition: none;
                        transition: none;
                        position: relative;
                        cursor: pointer;
                        &.selected,
                        &:hover {
                            border: 2px solid;
                            margin: -1px;
                            color: $base-color;
                        }
                        &:hover {
                            color: $base-color;
                        }
                        &.disabled,
                        &.disabled:hover {
                            border: 1px solid #b7b7b7;
                            margin: 0;
                            cursor: not-allowed;
                            color: #aaa;
                        }
                        img {
                            margin-right: 10px;
                            width: 26px;
                            height: 26px;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        i {
                            position: absolute;
                            right: -10px;
                            bottom: 0px;
                            display: none;
                            font-size: 32px;
                        }
                        &:not(.disabled).selected i,
                        &:not(.disabled):hover i {
                            display: block;
                        }
                    }
                }
            }
        }
        .buy-number {
            margin: 10px 0;
            .num-wrap {
                display: inline-block;
                vertical-align: middle;
                position: relative;
                margin-right: 10px;
                input {
                    font-size: 12px;
                    padding: 5px;
                    height: 34px;
                    width: 60px;
                    padding-right: 20px;
                    vertical-align: middle;
                    &.disabled {
                        cursor: not-allowed;
                    }
                }
                .operation {
                    display: inline-block;
                    vertical-align: middle;
                    position: absolute;
                    right: 1px;
                }
                span {
                    width: 17px;
                    height: 17px;
                    overflow: hidden;
                    cursor: pointer;
                    display: block;
                    line-height: 20px;
                    text-align: center;
                    user-select: none;
                    &.disabled {
                        cursor: not-allowed;
                    }
                }
            }
            .inventory {
                margin-left: 10px;
            }
        }
        .go-phone {
            position: relative;
            display: block;
            float: right;
            &:hover .qrcode-wrap {
                display: block;
            }
            .qrcode-wrap {
                border: 1px solid #e5e5e5;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
                height: 120px;
                overflow: hidden;
                padding: 10px;
                position: absolute;
                width: 120px;
                left: 30px;
                top: -50px;
                display: none;
            }
        }
    }
    .shop-wrap {
        float: right;
        border: 1px solid #e9e9e9;
        padding: 0 20px;
        width: 234px;
        box-sizing: border-box;
        .head-wrap {
            text-align: center;
            padding: 16px 0;
            border-bottom: 1px solid #f1f1f1;
            .img-wrap {
                width: 64px;
                height: 64px;
                line-height: 64px;
                display: inline-block;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .site-name {
                font-size: 14px;
                color: #383838;
            }
            .tag {
                margin-left: 10px;
                font-size: 14px;
            }
        }
        .info-wrap {
            padding: 10px 0;
            border-bottom: 1px solid #f1f1f1;
            dl {
                font-size: $ns-font-size-sm;
                dt {
                    color: #838383;
                    // width: 65px;
                    line-height: 25px;
                    font-weight: normal;
                    float: left;
                }
                dt.site-score {
                    padding-right: 5px;
                }
                dd {
                    height: 25px;
                    line-height: 25px;
                    // margin-left: 50px;
                    color: #838383;
                    span {
                        color: #383838;
                        font-weight: 600;
                    }
                    .el-rate {
                        padding-top: 2px;
                    }
                }
            }
        }
        .operation {
            padding: 12px 0;
            .el-button {
                padding: 10px 16px;
            }
        }
    }
    .detail-wrap {
        clear: both;
        .goods-recommended {
            float: left;
            width: 234px;
        }
        .goods-tab {
            margin-left: 264px;
            .attr-list {
                font-size: 14px;
                display: flex;
                flex-wrap: wrap;
                li {
                    margin-bottom: 5px;
                    padding: 0 10px;
                    flex: 0 0 30%;
                    width: 33%;
                }
            }
            .evaluate {
                .empty {
                    color: #898989;
                    text-align: center;
                    font-size: 14px;
                }
                nav {
                    padding: 10px;
                    overflow: hidden;
                    background: #f7f7f7;
                    li {
                        float: left;
                        padding: 0 20px;
                        cursor: pointer;
                        &:first-child {
                            padding-left: 0;
                        }
                        &:hover,
                        &.selected {
                            color: $base-color;
                        }
                    }
                }
                .list {
                    margin-top: 10px;
                    font-size: 14px;
                    li {
                        padding: 15px;
                        border-bottom: 1px solid #e5e5e5;
                        .member-info {
                            float: left;
                            width: 140px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            img {
                                width: 25px;
                                height: 25px;
                                border-radius: 50%;
                                margin-right: 5px;
                            }
                        }
                        .info-wrap {
                            margin-left: 150px;
                            margin-bottom: 10px;
                            .content {
                                padding: 10px 0;
                            }
                            .img-list {
                                .el-image {
                                    width: 50px;
                                    margin-left: 10px;
                                    &:first-child {
                                        margin-left: 0;
                                    }
                                }
                            }
                            .sku-info {
                                color: #898989;
                                font-size: 12px;
                                span {
                                    margin-right: 5px;
                                    &.create-time {
                                        margin-left: 10px;
                                    }
                                }
                            }
                            .evaluation-reply {
                                margin: 10px 0;
                                color: $base-color;
                            }
                            .review-evaluation {
                                .review-time {
                                    font-size: $ns-font-size-sm;
                                    margin-left: 20px;
                                    color: #898989;
                                }
                            }
                        }
                    }
                }
                .page-wrap {
                    margin-top: 10px;
                    text-align: right;
                }
            }
        }
    }
    // 组合套餐
    .bundling-wrap {
        clear: both;
        margin-bottom: 20px;
        .master {
            float: left;
            width: 150px;
            position: relative;
            .sku-img {
                text-align: center;
                width: 100px;
                height: 100px;
                margin-bottom: 10px;
            }
            .sku-name {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .sku-price {
                font-weight: bold;
                font-size: $ns-font-size-base;
            }
            i {
                color: #cccccc;
                font-size: 24px;
                font-weight: bold;
                width: 23px;
                height: 23px;
                overflow: hidden;
                position: absolute;
                right: 0;
                top: 40px;
            }
        }
        .operation {
            float: right;
            position: relative;
            width: 150px;
            padding-left: 50px;
            padding-top: 35px;
            .price-wrap {
                .bl-price {
                    font-size: 18px;
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            i {
                overflow: hidden;
                position: absolute;
                left: 0;
                top: 30px;
                text-align: center;
                font-size: 34px;
                font-weight: bold;
                color: #cccccc;
            }
        }
        .suits {
            margin-left: 170px;
            ul {
                overflow: hidden;
                li {
                    float: left;
                    width: 150px;
                    margin-left: 20px;
                    cursor: pointer;
                    &:first-child {
                        margin-left: 0;
                    }
                    .sku-img {
                        text-align: center;
                        width: 100px;
                        height: 100px;
                        margin: 0 auto 10px;
                    }
                    .sku-name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .sku-price {
                        font-weight: bold;
                        font-size: $ns-font-size-base;
                    }
                }
            }
        }
    }
}
</style>